<template>
    <div class="stationCount">
        <div class="bgColor">
            <div class="fylzCount lf">{{parseInt(CityEPAdata.negative_K04)}}</div>
            <div class="fcSta lf">
                <div class="baseStation">
                    功能站: {{getStationCountData[0]}}
                </div>
                <div class="functionStation">
                    基本站: {{getStationCountData[1]}}
                </div>
                <div class="stationAssess">
                    <dl class="stationD lf" v-for="(item , index ) of stationList" :key="index">
                        <dt >{{item.count}}</dt>
                        <dd :style="{background:item.background}"></dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="bgImg">
            
        </div>
    </div>
</template>
<script>
    export default {
        name: 'CityStationCount',
        data(){
            return{
                getStationCountData1:[],
                baseStation: 5,
                functionStation: 10,
                stationList:[{count: null,background:this.$comjs.color1},
                            {count: null,background:this.$comjs.color2},
                            {count: null,background:this.$comjs.color3},
                            {count: null,background:this.$comjs.color4},
                            {count: null,background:this.$comjs.color5}]
            }
        },
        props :{
            getStationCountData: Array,
            StationQXDJCounts:Array,
            CityEPAdata:Object
            //getStationCountData1:Array
        },
        watch:{
            getStationCountData :function (val) {
                if(val.length==1){
                    val[0]=val[0].Count;
                    val[1]=0;
                }
                else if(val.length==2){
                    val[0]=val[0].Count;
                    val[1]=val[1].Count;
                }  
            },
            StationQXDJCounts :function (val) {  
                for(var i=0;i<val.length;i++){
                    switch(val[i].DJ){
                        case "特别清新":{
                            this.stationList[0].count=val[i].Count;
                            break;
                        }
                        case "清新":{
                            this.stationList[1].count=val[i].Count;
                            break;
                        }
                        case "较清新":{
                            this.stationList[2].count=val[i].Count;
                            break;
                        }
                        case "一般":{
                            this.stationList[3].count=val[i].Count;
                            break;
                        }
                        case "不清新":{
                            this.stationList[4].count=val[i].Count;
                            break;
                        }
                    }
                }             
            },
        },
        mounted(){
            //console.log(this.getStationCounntData);
            
        }
    }
</script>
<style lang="stylus" scoped>
    .stationCount
        width: 370px
        height: 161px
        position: absolute
        left:38%
        top:71px
        z-index: 1
        font-size:20px
        overflow: hidden
        color: white
        .bgColor
            width:100%
            height:143px
            position: absolute
            z-index:100
            margin-top:18px
            background:rgba(0,0,0,0.55);
            .fylzCount
                width:54%
                line-height: 123px
                text-align : center
                color: #00FF00
                font-size: 25px
            .fcSta
                .baseStation
                    font-size: 16px
                    margin-top: 26px
                    margin-bottom: 16px
                .functionStation
                    font-size: 16px
                .stationAssess
                    margin-top: 10px
                    .stationD
                        margin-right: 5px
                        dt
                            width: 26px
                            line-height: 26px
                            text-align: center
                        dd
                            width: 26px
                            height: 7px

        .bgImg
            width:100%
            height:100%
            background:url('/station.png')
            position: absolute
            z-index:101
            
        
</style>


